<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('懒加载自定义叶子节点')}`">{{ $t('懒加载自定义叶子节点') }}</t>
            <li>
                由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点， 所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。 同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。
            </li>
        </template>
        <sib-tree
            lazy
            style="height: 200px;"
            :show-checkbox="showCheckbox"
            :load="loadNode">
        </sib-tree>
    </example>
</template>

<script>

export default {
    setup() {
        // eslint-disable-next-line consistent-return
        const loadNode = (node, resolve) => {
            if (node.level === 0) return resolve([{ name: '四大名著' }]);
            if (node.level > 1) return resolve([]);

            setTimeout(() => {
                const data = [
                    {
                        name: '金瓶梅',
                    },
                    {
                        name: '银瓶梅',
                        isLeaf: true,
                    },
                ];

                resolve(data);
            }, 500);
        };

        return {
            loadNode,
            templateString: `<template>
    <div class="example-box">
        <sib-tree
            lazy
            style="height: 200px;"
            :show-checkbox="showCheckbox"
            :load="loadNode">
        </sib-tree>
    </div>
</template>

<script>

export default {
    setup() {
        const loadNode = (node, resolve) => {
            if (node.level === 0) return resolve([{ name: '四大名著' }]);
            if (node.level > 1) return resolve([]);

            setTimeout(() => {
                const data = [
                    {
                        name: '金瓶梅',
                    },
                    {
                        name: '银瓶梅',
                        isLeaf: true,
                    },
                ];

                resolve(data);
            }, 500);
        };

        return {
            loadNode,
        };
    },
};
<\/script>`,
        };
    },
};
</script>
